import { useRootStore } from '../store'
import '../styles/appleItem.scss'

function Apple (props) {
  const { appleStore } = useRootStore()
  let { eat } = appleStore
  const { id, weight } = props

  const eatApple = (id, weight) => {
    eat(id, weight)
  }
  return (
    <div className="appleItem">
      <div className="apple"><img src={require('../images/apple.png').default} alt=""/></div>
      <div className="info">
          <div className="name">红苹果 - { id }号</div>
          <div className="weight">{ weight }克</div>
      </div>
      <div className="btn-div">
          <button onClick={() => { eatApple(id, weight) }}> 吃掉 </button>
      </div>
  </div>
  )
}

export default Apple